<template>
	<view class="container">
		<!-- <uni-card v-if="info.content" :is-shadow="false" is-full>
			<text>{{info.content}}</text>
		</uni-card> -->
		<uni-forms ref="baseForm" :modelValue="baseFormData">
			<uni-forms-item labelWidth="90px" class="form_item" label="门头照片或品牌LOGO" name="logo">
				<uni-file-picker v-model="baseFormData.logo" mode="grid" :auto-upload="false" @select="uploadImg" limit="1"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" class="form_item" label="选择行业" required name="industry">
				<uni-data-select v-model="baseFormData.industry" :localdata="info.industrys" :clear="false"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" label="店铺让利" required name="discount">
				<!-- <uni-data-checkbox v-model="baseFormData.discount" :localdata="paymode" /> -->
				<uni-data-select v-model="baseFormData.discount" :localdata="rangli"></uni-data-select>
			</uni-forms-item>
			<!-- <view class="shuoming" v-if="baseFormData.paymode==1">每笔营业收入到[我的钱包]，申请提现后，第二天您可收到营业款。</view> -->
			<!-- <view class="shuoming" v-if="baseFormData.paymode==0">平台给您充值现金，您送给平台一定的额度，多米街用户到店扫码支付时，扣除此额度即可，当额度没有时，平台再续充。例如平台提前给您1000元现金，您给平台送300元额度，等于平台有1300元给多米街用户消费。</view> -->
			<!-- <view style="color: red;margin: 10px 0px 0px 10px;" > 如修改结算方式，店铺上线后可联系您的业务经理</view> -->
			<!-- 			<uni-forms-item labelWidth="90px" label="是否连锁店" required>
				<uni-data-checkbox v-model="baseFormData.ischain" :localdata="chain" />
			</uni-forms-item> -->
			<uni-forms-item labelWidth="90px" label="门店位置" required name="address">
				<view class="position" @click="openMap">
					<text style="color: #000;" v-if="baseFormData.address">{{baseFormData.address}}</text>
					<text v-else>请选择位置</text>
				</view>
				<!-- <uni-easyinput v-model="baseFormData.address" placeholder="如:河南省郑州市管城区某小区"></uni-easyinput> -->
			</uni-forms-item>
			<!-- <view class="shuoming">● 定位的区域没有代理商，将无法提交</view> -->
			<uni-forms-item labelWidth="90px" label="店铺名称" required name="supname">
				<uni-easyinput v-model="baseFormData.supname" placeholder="如:老王烧烤、老王烧烤(**店)" />
			</uni-forms-item>
			<view style="color: red;margin: 10px 0px 0px 10px;" > 店铺名称提交后不可修改，请谨慎填写！</view>
			<!-- 			<uni-forms-item labelWidth="120px" label="当前单日营业额" required name="daysale">
				<uni-easyinput v-model="baseFormData.daysale" placeholder="当前单日营业额" />
			</uni-forms-item> -->
			<uni-forms-item labelWidth="90px" label="店铺电话" required name="principalmobile">
				<uni-easyinput type="number" v-model="baseFormData.principalmobile" placeholder="店铺电话" />
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" label="联系人" required name="principalname">
				<uni-easyinput v-model="baseFormData.principalname" placeholder="联系人" />
			</uni-forms-item>
			<uni-forms-item labelWidth="90px" label="老板ID" required="" name="merchid">
				<uni-easyinput type="number" @input="changeMerchid" v-model="baseFormData.merchid" placeholder="请填写老板ID" />
				<button style="margin-top: 10rpx;" size="mini" @click="search">查询</button>
			</uni-forms-item>
			<uni-forms-item v-if="merchInfo.id">
				<view class="user_content">
					<image class="user_img" :src="merchInfo.avatar"></image>
					<view class="user_nickname">{{merchInfo.nickname}}</view>
				</view>
			</uni-forms-item>
			<!-- <uni-forms-item labelWidth="90px" class="form_item" label="导师" required name="salemid">
				<uni-data-select v-model="baseFormData.salemid" :localdata="salers" :clear="false"></uni-data-select>
			</uni-forms-item> -->
			<view class="shuoming">
				● 提交后由运营中心和公司审核后，店铺即可上线营业。
			</view>
			
			<button class="totalBtn" type="primary" @click="submit('baseForm')">提交</button>
		</uni-forms>
		<view class="fill" v-show="isShow">
			<view class="fill_item">
				<bt-cropper ref="cropper" :ratio="1/1" :imageSrc="imageSrc"></bt-cropper>
				<button @click="crop">确定</button>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(["Location", "url"])
		},
		data() {
			return {
				isShow: false,
				imageSrc: '',
				imgs: '',
				// 基础表单数据
				baseFormData: {
					industry: '',
					ischain: 0,
					supname: '',
					daysale: '',
					address: '',
					principalmobile: '',
					principalname: '',
					salemid: '',
					logo: {},
					lat: '',
					lng: '',
					paymode: 1,
					discount: '',
					merchid: '',
					// refermid: ''
				},
				info: {
					content: '',
					industrys: [],
					salers: []
				},
				salers: [],
				paymode: [{
						text: '让利10%，最高补贴30%现金',
						value: 1
					},
					{
						text: '让利15%，最高补贴50%现金',
						value: 2
					},
					{
						text: '让利25%，最高补贴100%现金',
						value: 3
					}
				],
				rangli: [
					{value:3,text:'3%'},
					{value:4,text:'4%'},
					{value:5,text:'5%'},
					{value:6,text:'6%'},
					{value:7,text:'7%'},
					{value:8,text:'8%'},
					{value:9,text:'9%'},
					{value:10,text:'10%'},
					{value:11,text:'11%'},
					{value:12,text:'12%'},
					{value:13,text:'13%'},
					{value:14,text:'14%'},
					{value:15,text:'15%'},
					{value:16,text:'16%'},
					{value:17,text:'17%'},
					{value:18,text:'18%'},
					{value:19,text:'19%'},
					{value:20,text:'20%'},
				],
				merchInfo: [],
				// // 是否连锁店
				// chain: [{
				// 	text: '否',
				// 	value: 0
				// }, {
				// 	text: '是',
				// 	value: 1
				// }],


				rules: {
					industry: {
						rules: [{
							required: true,
							errorMessage: '请选择行业'
						}]
					},
					supname: {
						rules: [{
							required: true,
							errorMessage: '请填写店铺名称'
						}]
					},
					discount: {
						rules: [{
							required: true,
							errorMessage: '请选择店铺让利'
						}]
					},
					// daysale: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写单日营业额'
					// 	}]
					// },
					address: {
						rules: [{
							required: true,
							errorMessage: '请选择位置'
						}]
					},
					principalmobile: {
						rules: [{
								required: true,
								errorMessage: '请填写电话号'
							},
							{
								format: 'number',
								errorMessage: '请正确填写电话号'
							}
						]
					},
					principalname: {
						rules: [{
							required: true,
							errorMessage: '请填写联系人'
						}]
					},
					salemid: {
						rules: [{
							required: true,
							errorMessage: '请选择导师'
						}]
					},
					merchid: {
						rules: [{
							required: true,
							errorMessage: '请填写老板ID'
						}]
					}
					// logo: {
					// 	rules: [{
					// 		validateFunction: function(rule, value, data, callback) {
					// 			if (!value.url) {
					// 				callback('请选择店铺图片')
					// 			}
					// 			return true
					// 		}
					// 	}]
					// }
				}
			}
		},
		onReady() {
			this.$refs.baseForm.setRules(this.rules)
		},
		onLoad() {
			this.getInfo();
			this.getLocation();
		},
		methods: {
			changeMerchid(e){
				this.merchInfo = [];
			},
			getLocation(){
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success() {
						uni.onLocationChange(function(res) {
							console.log('成功',res)
							that.$store.commit('upLocation', {
								x: res.longitude,
								y: res.latitude
							})
							uni.setStorageSync('x',res.longitude);
							uni.setStorageSync('y',res.latitude);
							that.$isResolve();
						});
					},
					fail(err) {
						uni.startLocationUpdate({
							success: res => {
								uni.onLocationChange(function(res) {
									console.log('失败',res)
									that.$store.commit('upLocation', {
										x: res.longitude,
										y: res.latitude
									})
									uni.setStorageSync('x',res.longitude);
									uni.setStorageSync('y',res.latitude);
									that.$isResolve();
								});
							},
							fail: err => {
								that.$isResolve();
							}
						});
					}
				});
			},
			search(){
				if(this.baseFormData.merchid=='') return this.$api.msg('请输入老板ID');
				this.$axios('apply/searchMerch','POST','supplier',{
					mid: this.baseFormData.merchid
				}).then(res=>{
					this.merchInfo = [];
					if(res.data.code == 200){
						this.merchInfo = res.data.data;
					}
				})
			},
			crop(){
			    // 通过组件定义的ref调用cropper方法，返回一个promise对象
			    this.$refs.cropper.crop().then((res)=>{
					this.imgs = res;
					this.uploadYuan();
			    })
			},
			getInfo() {
				this.$axios('apply/display', "POST", 'supplier').then(res => {
					if (res.data.code == 200) {
						let data = res.data.data;
						this.info.industrys = data.industrys.map(v => {
							return {
								value: v.id,
								text: v.name
							}
						})
						this.info.content = data.content;
					}
				})
			},
			uploadImg(e) {
				let that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				that.imageSrc = e.tempFilePaths[0];
				that.isShow = true;
			},
			uploadYuan(){
				let that = this;
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
						url: that.url.upload,
						filePath: that.imgs,
						name: 'a',
						header: {
							token: token
						},
						formData: {
							'file': 'a'
						},
						success(res) {
							let data = JSON.parse(res.data);
							if (data.code == 200) {
								that.isShow = false;
								let extname = data.data.filename.split('.')[1];
								that.baseFormData.logo = {
									"name": data.data.url,
									"extname": extname,
									"url": data.data.url,
								};
								uni.showToast({
									title: '上传成功',
								})
							} else {
								uni.showToast({
									title: '上传失败请重试',
									icon: 'none'
								})
							}
						},
						fail() {
							uni.showToast({
								title: '上传失败请重试',
								icon: 'none'
							})
						},
						complete() {
							uni.hideLoading();
						}
					})
				
			},
			openMap() {
				let that = this;
				uni.chooseLocation({
					latitude: that.Location.y,
					longitude: that.Location.x,
					success(res) {
						that.baseFormData.address = res.address;
						that.baseFormData.lat = res.latitude;
						that.baseFormData.lng = res.longitude;
						that.$axios('apply/getSalers', 'POST', 'supplier', {
							address: res.address
						}).then(res => {
							if (res.data.code == 200) {
								that.salers = res.data.data.map(v => {
									return {
										value: v.id,
										text: v.nickname
									}
								})
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			submit(ref) {
				// console.log(this.baseFormData)
				// return;
				if(!this.merchInfo.id){
					return this.$api.msg('请先查询确认老板信息！')
				}
				this.$refs[ref].validate().then(res => {
					// return;
					let obj = {
						...this.baseFormData,
						logo: this.baseFormData.logo.url || '',
					}
					this.$axios('apply/submit', "POST", 'supplier', obj).then(res => {
						if (res.data.code == 200) {
							this.$api.msg('提交成功！');
							setTimeout(() => {
								this.$navTo('/pages/individualism/user')
							}, 500)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>


<style lang="scss">
	page{
		padding-bottom: 100rpx;
	}
	.fill{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(#000,.8);
		z-index: 999999;
		display: flex;
		align-items: center;
		justify-content: center;
		.fill_item{
			width: 700rpx;
			height: 700rpx;
		}
	}
	.container {
		padding-bottom: 100upx;
	}

	.uni-forms {
		padding: 0 20upx;
	}

	.uni-forms .uni-forms-item {
		margin-top: 30upx;
		margin-bottom: 0;
		.user_content{
			display: flex;
			align-items: center;
			.user_img{
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
			}
			.user_nickname{
				width: calc(100% - 120rpx);
				color: #999;
				padding-left: 20rpx;
			}
		}
	}

	.shuoming {
		margin-top: 12px;
		padding-left: 6px;
		font-size: 26upx;
		color: #777;
	}


	.message {
		color: #999;
		font-size: 22upx;
	}

	.go_submit {
		margin-top: 70upx;
		line-height: 80upx;
	}

	.position {
		border: 1px #e5e5e5 solid;
		border-radius: 4px;
		color: #999;
		line-height: 35px;
		font-size: 12px;
		padding: 0 20upx;
	}
</style>